<template>
  <el-form :model="form" label-width="80px" ref="form">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form-item label="计划时间" prop="date">
          <el-date-picker
            clearable
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            v-model="date"
            type="daterange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="计划名称" prop="evalPlanName">
          <el-input
            @keyup.native.enter="handleSearch"
            placeholder="请输入计划名称"
            clearable
            v-model="form.evalPlanName"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="考评周期" prop="evalPlanCycle">
          <el-select clearable v-model="form.evalPlanCycle">
            <el-option :value="0" label="临时计划" />
            <el-option :value="2" label="周计划" />
            <el-option :value="3" label="月计划" />
            <el-option :value="4" label="季度计划" />
            <el-option :value="5" label="年计划" />
          </el-select>
        </el-form-item>
      </el-col>
      <template v-if="advanced">
        <el-col class="mt20" :span="6">
          <el-form-item>
            <span style="color:#fff">1111</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划类型" prop="evalPlanType">
            <el-select clearable v-model="form.evalPlanType">
              <el-option :value="1" label="常规计划"></el-option>
              <el-option :value="2" label="专项计划"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="考评形式" prop="evalMode">
            <el-select clearable v-model="form.evalMode">
              <el-option :value="1" label="填报"></el-option>
              <el-option :value="2" label="巡查"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划状态" prop="state">
            <el-select clearable v-model="form.state">
              <el-option :value="1" label="暂停"></el-option>
              <el-option :value="2" label="启用"></el-option>
              <el-option :value="3" label="到期"></el-option>
              <el-option :value="4" label="作废"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="6">
        <el-tooltip class="item" content="查询" effect="dark" placement="top">
          <el-button type="primary" @click="handleSearch" icon="el-icon-search" />
        </el-tooltip>
        <el-tooltip class="item" content="查询" effect="dark" placement="top">
          <el-button @click="handleReset" icon="el-icon-refresh-right" />
        </el-tooltip>
        <a @click="toggleAdvanced" style="margin-left: 8px">
          {{ advanced ? '收起' : '展开' }}
          <i
            :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          />
        </a>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      date: null,
      form: {
        startDate: null,
        endDate: null,
        evalPlanName: null,
        evalPlanCycle: null,
        evalPlanType: null,
        evalMode: null,
        state: null,
        pageNo: 1
      },
      advanced: false
    }
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleSearch() {
      if (this.date) {
        this.form.startDate = this.date[0]
        this.form.endDate = this.date[1]
      } else {
        this.$set(this.form, 'startDate', null)
        this.$set(this.form, 'endDate', null)
      }
      this.$emit('search', this.form)
    },
    handleReset() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.$emit('search', this.form)
      })
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.el-form-item {
  margin-bottom: 0;
}
</style>

